<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="../js/jquery-3.3.1.js"></script>
<!--<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>-->
<link rel="stylesheet" href="css/message.css" type="text/css" />
<script src="../js/mui.min.js"></script>
<!--<link href="../css/mui.min.css" rel="stylesheet" />-->
<!-- <script type="text/javascript" src="api/message.php?action=test"></script> -->
<script>
var myurl = "http://192.168.1.107/ceshi/index/home/tongxun/muiapi/";
var mname= "大龙了";//我的名字
var mid="1";
var uname= "明明";//好友名字
var uid= "2";//好友id
var mtimg="15153046091299470971.jpg";//我的头像图片
var utimg="15153046091299470971.jpg";//好友的头像图片
var url="http://192.168.1.107/public/uploads/shop/";//图片地址路径//头像图片路径
var messageid="0";
        // $(document).ready(function(){});
            var message = ""; 
            setInterval(function(){
                addb();
            // var now = new Date();
// var div = document.getElementById('show_messagea');
// // div.innerHTML = div.innerHTML + 'time_' + now.getTime() + '<br />';
// div.scrollTop = div.scrollHeight;
            },1500);

            //滚动条滚动到顶部时候触发事件
//var $document = $(document);//缓存一下$(document)
    $(window).scroll(function(){
    　　var $this = $(this),
            scrollTop = $this.scrollTop(),
            scrollHeight = $document.height(),
            windowHeight = $this.height();
    　　if(scrollTop + windowHeight >= scrollHeight-50){
      document.getElementById("num").value = '0';
      document.getElementById("num").style.display="none";
    　　}
    //当滚动条到达顶部时候触发事件
  //   if ($(window).scrollTop() < 0.01) {
  //       // alert("已经到顶部了");
  //     // if(confirm("是否需要查看更多历史记录")){
  //   // adda();//显示历史数据
  // // }
  // }
});

        //页面加载   获取当前信息
function addb(){

            $.ajax({ 
                type: "GET",//请求方式
                url: myurl+"getdata.php?p=0.1&uid="+uid,//地址，就是json文件的请求路径
                // data: {"p":$("#p").val(),"user":user},
                dataType: "json",//数据类型可以为 text xml json  script  jsonp
　　　　　　　　success: function(result)
               {
                // 将json对象转化为字符串，再判断该字符串是否为"[]"
                var b = (JSON.stringify(result));
                if (b!="[]") {
                        addBoxb(result);//读取显示数据
                        // alert("获取数据中"+b);
                }else{
                       alert("获取的是空数据"+b);
                }
                //     // addBoxb(result);
                } });
        };

         //页面加载   获取历史全部信息
         function adda(){
             sublodopen();//开启出现加载圈圈
            $.ajax({ 
                type: "GET",//请求方式
                url: myurl+"getdataa.php?p="+$("#p").val()+"&uid="+uid,//地址，就是json文件的请求路径
                // data: {"p":$("#p").val(),"user":user},
                dataType: "json",//数据类型可以为 text xml json  script  jsonp
　　　　　　　　　 success: function(result){//返回的参数就是 action里面所有的有get和set方法的参数
                    var b = (JSON.stringify(result));
                if (b!="[]") {
                    // alert("更新数据！"+b);
                  var p = document.getElementById("p");//聊天记录页数显示
                  p.value = parseInt(p.value) + 1;//每获取一次数据 input翻页数加1;
                      addBoxa(result);
                    }else{
                      alert("对不起没有更多数据！"+b);
                       sublodend();//加载完成后圈圈图片关闭方法
                    }
                                            }
                   });
        };
        function addBoxa(result)
         {
            //result是一个集合,所以需要先遍历读取更新一条信息
            $.each(result,function(index,obj)
            {
                    if (obj['user_ida']==mid) {
                          name='我';
                            color='#98FB98';
                        }else{
                          name=uname;
                            color='#fff';
                        }
                $("#show_messagea").prepend(//获得图片地址
                    "<div class='sp'><div class='spa' ><img src='"+url+obj['url']+"'/></div>"+
                    //获得名字
                    "<div class='spb'><div class='spba'><p><span>"+name+obj['id']+"</span></div>"+
                    //获得性别
                    "<div class='spbb' style='background:"+color+"'><span>"+obj['message']+"</span></div>"+
                    //获得邮箱地址
                    "<div  class='spbc'><span>"+obj['addtime']+"</span><p></div></div></div>");
            }    );
             sublodend();//加载完成后圈圈图片关闭方法
               ZTop();
        }

     function addBoxb(result)
    { 
 //result是一个集合,所以需要先遍历每1秒自动更新数据
          
            $.each(result,function(index,obj)
            {
                    if (obj['user_ida']==mid)
                    {
                          name='我';
                            color='#98FB98';
                    }else{
                          name=uname;
                            color='#fff';
                        }
                $("#show_messagea").append(//获得图片地址
                    "<div class='spa'><img class='img mui-media-object mui-pull-left' src='"+url+obj['url']+"'/></div>"+
                    //获得名字
                    "<div class='spb'><div class='spba'><span>"+name+obj['id']+"</span></div>"+
                    //获得性别
                    "<div class='spbb' style='background:"+color+"'><span>"+obj['message']+"</span></div>"+
                    //获得邮箱地址
                    "<div  class='spbc'><span>"+obj['addtime']+"</span></div></div>");
             var n = document.getElementById("num");//聊天记录页数显示
                 n.style.display="block";//获取数据开启消息提醒
                 n.value = parseInt(n.value) + 1;//每获取一次数据 input翻页数加1;
              });
    }
   
$("#ckq").keydown(function(e){    //按下键盘触发函数
                if(e.keyCode==13){            //如果按下的是回车
                  add();  
                }
            });
function add()
    {
        if ($("#ckq").val() == "" || $("#ckq").val() == " " || $("#ckq").val() == false)
                {alert("内容不能为空");
        }else{
          abc();//把发布的内容输出给当前页面展示
             
            }
    }

var currentPosition,timer; 
function GoTop(){ 
    //回到顶部
timer=setInterval("runToTop()",1); 
} 
function runToTop(){ 
    //滚动到顶部
currentPosition=document.documentElement.scrollTop || document.body.scrollTop; 
currentPosition-=10; 
if(currentPosition>30) 
{ 
window.scrollTo(0,currentPosition); 
} 
else 
{ 
window.scrollTo(0,300); 
clearInterval(timer); 
} 
} 

function ZTop(){//滚动条到上300位置
window.scrollTo(0,300); 

}
function TTop(){//回到底部
window.scrollTo(0,document.body.scrollHeight); 
}


//加载时候出现个圈圈
function sublodopen(){//开始出现圈圈图片方法
document.getElementById('quanquanimg').style.display=''

}
function sublodend(){//加载完成后圈圈图片关闭方法
document.getElementById('quanquanimg').style.display='none'

}



function abc(){
    var now = new Date();         
        // var year = now.getFullYear();       //年  
        // var month = now.getMonth() + 1;     //月  
        // var day = now.getDate();            //日  
          
        var hh = now.getHours();            //时  
        var mm = now.getMinutes();          //分  
        var ss = now.getSeconds();           //秒  
        var time= hh+"点"+mm+"分"+ss+"秒";
       
 $.post(myurl+"/insert.php", {message:$("#ckq").val(),user_idb:uid},
   function(result){
    if (!result) {
        $("#show_messageb").append("<div class='spbc' style='background:red;width:100%'><span>！！！您刚刚在"+result+time+"发出的数据，发送失败！请检查您的网络。</span></div>");
        // alert("成功"+result);
    }
   });//这个json 是请求返回数据类型，不写的话默认是字符串类型
        // TTop();
//这个json 是请求返回数据类型，不写的话默认是字符串类型
$("#show_messagea").append("<div class='spa'><img class='img' src='"+url+mtimg+"'/></div>"
                    //获得名字
+"<div class='spb'><div class='spba'><span>我"+"</span></div>"
//获得性别
+"<div class='spbb' style='background:#90EE90'><span>"+$('#ckq').val()+"</span></div>"
//获得邮箱地址
+"<div  class='spbc'><span>"+time+"</span></div></div>");
    $("#ckq").val('');//清空留言框内容;

        // $.ajax({
        //         url: "chat.php",
        //         type: "post",
        //         async: false,
        //         data: {"message":$("#ckq").val(),"user_idb":+uid}
        //     },);
        TTop();
        // $("#ckq").val('');
};
</script>
</head>
<body style="width: 100%;">
  <input type="submit" id="num" style="position: fixed;background: red; color: #fff; top: 20px;right: 25px;z-index: 100;display:block;" value="1" onclick="TTop();">
<div class="content" >
    <div class="sp"><div class="sptop">
        <input type="submit" id="p" readonly="readonly" name="p" value="1"onclick="addOne();" >
<!--         <input type="submit" id="Two" value="回到底部" onclick="TTop()"> -->
        <input type="submit" id="Two" value="去底部"  onclick="TTop()">
        <input type="submit" id="btn2" value="更多历史记录" onclick="adda();"></div>
        <!-- 加载中调用的图片 -->
        <div id="quanquanimg" style="display:none"><img src="image/quanquan.gif"></div>
        <div class="list" id="show_messagea">
        </div>
    </div>
</div>
<div class="dibu">

        <input  type="text" id="ckq" name="message" placeholder="请留言">

        <input type="hidden" name="user_idb" value="<?php echo $_GET['id']; ?>">
        <input  type="submit" name="OK" value="发送" onclick="add();">


</div>
</body>
</html>